<template>
<div class="padding10">
  <div class="box box-custom">
    <div class="box-header with-border">
      <h3 class="box-title">机构信息管理</h3>
      <button type="button" class="btn btn-custom pull-right left10" v-on:click="showAdd()">新增机构</button>
      <button type="button" class="btn btn-custom pull-right left10" v-on:click="importAssessmentDialog = true">导入调查结果</button>
    </div>
    <div class="box-body">
      <el-table class="table table-bordered"
        style="width: 100%"
        size="mini"
        border
        stripe
        highlight-current-row
        :data="personnelList"
        >
          <el-table-column prop="name" label="机构全称" width="100">
          </el-table-column>
          <el-table-column prop="address" label="机构地址" width="90">
          </el-table-column>
          <!-- el-table-column prop="phone" label="联系电话" width="100">
          </el-table-column>
          <el-table-column prop="legalPerson" label="机构法人" width="90">
          </el-table-column -->
          <el-table-column prop="establishDate" label="成立时间" width="100">
          </el-table-column>
          <!-- el-table-column prop="employeesNum" label="总工作人数" width="100">
          </el-table-column -->
          <el-table-column prop="servedNum" label="入住总人数" width="100">
          </el-table-column>
          <el-table-column label="资质验证结果" width="105">
            <template slot-scope="scope">
              <span>{{scope.row.isPass ? "合格" : "不合格"}}</span>
            </template>
          </el-table-column>
          <el-table-column label="已参与的调查问卷" width="260">
            <template slot-scope="scope">
              <span v-for="item in scope.row.assessment">
                <button type="button" class="btn btn-link" :title="item.suName + item.dateTime" v-on:click="showAssessmentResult(item.suAnswerId, scope.row)">
                  <span class="fa fa-eye"></span>
                  <span>{{item.suName}}</span>
                  <span> {{item.dateTime}}</span>
                </button>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280">
            <template slot-scope="scope">
              <button v-if="scope.row.isPass" type="button" class="btn btn-link" v-on:click="addAssessment(scope.row)">
                <span class="el-icon-circle-plus-outline"></span> 新建调查
              </button>
              <button type="button" class="btn btn-link" v-on:click="showEdit(scope.$index, scope.row)">
                <i class="el-icon-edit"></i> 编辑
              </button>
              <button type="button" class="btn btn-link danger" v-on:click="del(scope.$index, scope.row)">
                <i class="el-icon-delete"></i> 删除
              </button>
            </template>
          </el-table-column>
      </el-table>
      <el-pagination v-if="total>0"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-size="pageSize"
      layout="prev, pager, next, total"
      :total="total">
      </el-pagination>
    </div>
  </div>
  <el-dialog width="60%"
  :title="dialogTitle"
  :visible.sync="dialogVisible"
  :before-close="handleClose">
    <form class="form-horizontal">
      <div class="form-inline bottom10">
        <div class="input-group">
          <span class="input-group-addon">机构全称</span>
          <input type="text" class="form-control" placeholder="机构全称" name="name" v-model="formData.name">
          <span class="input-group-addon red">*</span>
        </div>
        <div class="input-group">
          <span class="input-group-addon">机构地址</span>
          <input type="text" class="form-control" placeholder="机构地址" name="address" v-model="formData.address" />
          <span class="input-group-addon red">*</span>
        </div>
      </div>
      <div class="form-inline bottom10">
        <div class="input-group">
          <span class="input-group-addon">机构法人</span>
          <input type="text" class="form-control" placeholder="机构法人" name="legalPerson" v-model="formData.legalPerson">
          <span class="input-group-addon red">*</span>
        </div>
        <div class="input-group">
          <span class="input-group-addon">成立时间</span>
          <input type="date" class="form-control" placeholder="成立时间" name="establishDate" v-model="formData.establishDate">
          <span class="input-group-addon red">*</span>
        </div>
      </div>
      <div class="form-inline bottom10">
        <div class="input-group">
          <span class="input-group-addon">机构电话</span>
          <input type="text" class="form-control" placeholder="机构电话" name="phone" v-model="formData.phone">
          <span class="input-group-addon red">*</span>
        </div>
        <div class="input-group">
          <span class="input-group-addon">工作人员总数</span>
          <input type="number" class="form-control" placeholder="工作人员总数" name="employeesNum" v-model="formData.employeesNum">
        </div>
      </div>
      <div class="form-inline bottom10">
        <div class="input-group">
          <span class="input-group-addon">入住总人数</span>
          <input type="number" class="form-control" placeholder="入住总人数" name="servedNum" v-model="formData.servedNum">
          <span class="input-group-addon red">*</span>
        </div>
      </div>
      <div class="form-inline bottom10">
        <div class="input-group">
          <span class="input-group-addon">资质证照</span>
          <select class="form-control" name="permit" v-model="formData.permit">
            <option value="营业执照">营业执照</option>
            <option value="事业单位法人证书">事业单位法人证书</option>
            <option value="民办非企业单位登记证书">民办非企业单位登记证书</option>
            <option value="其他">其他</option>
            <option value="false">无合格执照</option>
          </select>
          <span class="input-group-addon red">*</span>
        </div>
        <div class="input-group">
          <span class="input-group-addon">消防证明</span>
          <select class="form-control" name="firePermit" v-model="formData.firePermit">
            <option value="消防审验合格证明">消防审验合格证明</option>
            <option value="消防备案证明">消防备案证明</option>
            <option value="其他">其他</option>
            <option value="false">无合格消防证明</option>
          </select>
          <span class="input-group-addon red">*</span>
        </div>
      </div>
      <div class="form-inline bottom10">
        <div class="input-group">
          <span class="input-group-addon">房产证明</span>
          <select class="form-control" name="houseProperty" v-model="formData.houseProperty">
            <option value="房产证明">房产证明</option>
            <option value="房产租赁使用证明">房产租赁使用证明</option>
            <option value="其他">其他</option>
            <option value="false">无合格房产使用证明</option>
          </select>
          <span class="input-group-addon red">*</span>
        </div>
        <div class="input-group">
          <span class="input-group-addon">食品经营许可证</span>
          <select class="form-control" name="foodPermit" v-model="formData.foodPermit">
            <option value="无餐饮机构">无餐饮机构</option>
            <option value="餐饮机构经营许可证">餐饮机构经营许可证</option>
            <option value="false">设有餐饮的机构无经营许可证</option>
          </select>
          <span class="input-group-addon red">*</span>
        </div>
      </div>
      <div class="form-inline bottom10">
        <div class="input-group">
          <span class="input-group-addon">医疗机构执业许可证</span>
          <select class="form-control" name="medicalLicense" v-model="formData.medicalLicense">
            <option value="无医疗机构">无医疗机构</option>
            <option value="医疗机构执业许可证">医疗机构执业许可证</option>
            <option value="医疗机构执业备案">医疗机构执业备案</option>
            <option value="其他">其他</option>
            <option value="false">有医疗机构无合格许可证</option>
          </select>
          <span class="input-group-addon red">*</span>
        </div>
        <div class="input-group">
          <span class="input-group-addon">特种设备使用登记证</span>
          <select class="form-control" name="specialEquipmentPermit" v-model="formData.specialEquipmentPermit">
            <option value="无特种设备">无特种设备</option>
            <option value="锅炉使用登记证">锅炉使用登记证</option>
            <option value="压力管道（含气瓶）使用登记证">压力管道（含气瓶）使用登记证</option>
            <option value="电梯安全检验标志">电梯安全检验标志</option>
            <option value="其他">其他</option>
            <option value="false">有特种设备无合格许可证</option>
          </select>
          <span class="input-group-addon red">*</span>
        </div>
      </div>
      <div class="form-inline bottom10">
        <div class="input-group" style="width: 92%;">
          <span class="input-group-addon">备注</span>
          <textarea class="form-control" placeholder="备注信息" name="description" v-model="formData.description"></textarea>
        </div>
      </div>
      <div class="textCenter">
        <button type="button" class="btn btn-custom" v-on:click="onSubmit()">保存</button>
      </div>
    </form>
  </el-dialog>
  <el-dialog id="assessmentDialog" width="70%"
  title="新增评估调查"
  :visible.sync="assessmentDialog"
  :before-close="handleClose2">
    <newAssessment ref="assessment" :personnelData="selectPersonnel" @closeDialog="()=> assessmentDialog = flase"></newAssessment>
  </el-dialog>
  <el-dialog width="60%"
  title="展示历史评估结果"
  :visible.sync="showResultDialog"
  :before-close="handleCloseShowResult">
    <assessmentResult :personnel="selectPersonnel" :assessmentData="resultData"></assessmentResult>
  </el-dialog>
  <el-dialog width="60%"
  title="导入评估数据"
  :visible.sync="importAssessmentDialog">
    <div class="textCenter">
      <input type="file" name="importFile" id="importFile" />
      <button type="button" class="btn btn-custom" v-on:click="importAssessmentFile">提交</button>
    </div>
  </el-dialog>
</div>
</template>
<script>
import newAssessment from './assessment/newAssessIns.vue'
import assessmentResult from './assessment/insAssessResult.vue'

export default {
  name: 'orgKpi',
  data () {
    return {
      searchData: {},
      pageNum: 1,
      pageSize: 20,
      total: 0,
      personnelList: [],
      // 添加 编辑 客户信息对话框
      dialogVisible: false,
      dialogTitle: '',
      formData: {},
      // 问卷调查对话框
      assessmentDialog: false,
      selectPersonnel: {},
      // 展示历史调查结果
      showResultDialog: false,
      resultData: {},
      // 导入调查数据
      importAssessmentDialog: false,
    }
  },
  props: {
  },
  components: {
    newAssessment,
    assessmentResult
  },
  methods: {
    // 检查离线调查，如果存在未完成的离线调查，则自动显示调查试卷
    checkLocalStorage () {
      if (localStorage.getItem("currentAssessment")) {
        this.$confirm('是否继续未完成的离线调查？').then(
          () => {
            let storageData = JSON.parse(localStorage.getItem("currentAssessment"))
            this.selectPersonnel = storageData.personnel
            this.assessmentDialog = true
          }
        ).catch( () => {})
        return true
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？').then(_ => { done() }).catch(_ => {})
    },
    handleClose2 (done) {
      this.$confirm('关闭窗口会丢失当前未完成的调查记录数据,确认关闭？')
      .then(_ => {
        // 关闭前清空未完成的调查数据
        this.$refs.assessment.clearAll()
        done()
      })
      .catch(_ => {})
    },
    handleCloseShowResult (done) {
      done()
      this.resultData = {}
    },
    handleCurrentChange (val) {
      this.pageNum = val
      this.getPersonnelByPage()
    },
    getPersonnelByPage () {
      let searchData =  this.searchData
      let url = 'org/listByPage?pageSize=' + this.pageSize + '&pageNum=' + this.pageNum
//      url += '&conditionStr=' + encodeURIComponent(JSON.stringify(searchData))
      this.$http.get(url).then(
        response => {
          this.personnelList = response.data.data.content
          this.total =  response.data.data.totalElements
//          this.pageNum = response.data.data.pageNum
//          this.pageSize = response.data.data.pageSize
        }
      )
    },
    getPersonnelList () {
      // org/listByPage
      this.$http.get('org/listAll').then(
        response => {
          this.personnelList = response.data.data
        }
      )
    },
    searchPersonnel () {
      let isSearch = false
      for(let key in this.searchData) {
        if(this.searchData[key] !== '') {
          console.log(key, this.searchData[key])
          isSearch = true
        }
      }
      if (!isSearch) {
        alert('至少需要选择一项过滤条件')
        return false
      }
      this.getPersonnelByPage()
    },
    chearSearch () {
      this.searchData = {}
      this.pageNum = 1
      this.getPersonnelByPage()
    },
    setBirthdayAndAge () {
      if (!this.$fun.chackIdCard(this.formData.idNumber)) {
        alert('身份证格式不正确')
        return false;
      }
      this.formData.birthday = this.$fun.getBirthdayFromIdCard(this.formData.idNumber)
      this.formData.age = this.$fun.getAgeByBirthday(this.formData.birthday)
      // vue绑定不能及时刷新页面显示，手动对element赋值
      $("input[name='birthday']").val(this.formData.birthday)
      $("input[name='age']").val(this.formData.age)
    },
    addPersonnel () {
      // this.formData.organizationId = 1
      // this.formData.appraiserId = 3
      this.$http.post('org/save', this.formData).then(
        response => {
          alert(response.data.message)
          this.getPersonnelByPage()
          this.dialogVisible = false
        }
      )
    },
    updataPersonnel () {
    },
    showAdd () {
      this.dialogTitle = '添加人员信息'
      this.formData = {}
      this.dialogVisible = true
    },
    showEdit (index, row) {
      this.dialogTitle = '编辑人员信息'
      this.formData = {}
      this.formData = row
      this.dialogVisible = true
    },
    onSubmit () {
      // this.formData.id ? this.updataPersonnel() : this.addPersonnel()
      this.addPersonnel()
    },
    del (index, row) {
      if (confirm('确认删除？') === false ) return false
      this.$http.delete('org/deleteById/' + row.id).then(
        response => {
          alert(response.data.message)
          this.personnelList.splice(index, 1)
        }
      )
    },
    addAssessment (personnel) {
      this.selectPersonnel = personnel
      this.assessmentDialog = true
    },
    showAssessmentResult (assessmentResultId, personnel) {
      this.selectPersonnel = personnel
      this.$http.get('insAssessment/findOneById?id=' + assessmentResultId).then(
        response => {
          this.resultData = response.data.data
          this.showResultDialog = true
        }
      )
    },
    importAssessmentFile () {
      let fileObj = document.getElementById('importFile').files[0]
      if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
        alert("请选择文件")
        return
      }

      //加入文件对象
      let formFile = new FormData()
      formFile.append("file", fileObj)
      this.$http.post('insAssessment/uploadOffLineSurvey', formFile).then(
        response => {
          this.selectPersonnel = null;
          document.getElementById('importFile').value = null
          this.importAssessmentDialog = false
          this.resultData = response.data.data
          this.$http.get('org/getById?id=' + this.resultData.organizationId).then(
            resp =>{
              this.selectPersonnel = resp.data.data
              this.showResultDialog = true
            }
          )
        }
      )
    }
  },
  beforeCreate () {},
  created () {},
  beforeMount () {},
  mounted () {
    // this.getPersonnelList()
    this.getPersonnelByPage()
    this.checkLocalStorage()
  },
  beforeUpdate () {},
  updated () {},
  beforeDestroy () {},
  destroyed () {}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.form-inline > .input-group{width:47%; margin-left:2%;}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
 }
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 120px;
 }
</style>
